<link rel="stylesheet" href="${request.contextPath}/static/oms/iframe/plugins/fileupload/css/jquery.fileupload-ui.css">
<link type="text/css" href="${request.contextPath}/static/oms/iframe/plugins/jeditor/css/jeditor.css" rel="stylesheet" />
<link href="${request.contextPath}/static/oms/iframe/plugins/bootstrap-image-picker/css/image-picker.css"  rel="stylesheet" type="text/css" />
<div class="row">
	<div class="col-md-12">
		<form id="addForm" class="form-horizontal" action="${request.contextPath}/oms/blog/content/add" method="post" onsubmit="return false">
			<div class="box-body" >
				<div class="form-group">
					<label for="blogBlogCategoryId" class="col-sm-2 control-label">分类</label>
					<div class="col-sm-3">
						<select id="blogBlogCategoryId" type="text" class="form-control pull-right" name="blogCategoryId" style="width: 100%">
						</select>
					</div>
					<label for="blogTitle" class="col-sm-2 control-label">标题</label>
					<div class="col-sm-5">
						<input type="text" class="form-control" name="title" id="blogTitle" placeholder="输入标题...">
					</div>
				</div>
				<div class="form-group">
					<label for="blogShortTitle" class="col-sm-2 control-label">短标题</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="shortTitle" id="blogShortTitle" placeholder="输入短标题...">
					</div>
				</div>
				<div class="form-group">
					<label for="blogKeywords" class="col-sm-2 control-label">关键字</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="keywords" id="blogKeywords" placeholder="输入关键字...">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label" >概要</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="description" id="blogDescription" placeholder="输入概要...">
					</div>
				</div>
				<div class="form-group">
					<label for="blogThumbnail" class="col-sm-2 control-label">缩略图</label>
					<div class="col-sm-7">
						<input type="text" class="form-control" name="thumbnail" id="blogThumbnail" placeholder="输入缩略图...">
					</div>
					<div class="col-sm-3">
						<span class="btn btn-success fileinput-button">
							<i class="glyphicon glyphicon-plus"></i>
							<span>选择文件</span>
							<input id="blogThumbnailFileupload"  class="fileinput-button"  type="file" name="file"  data-url="/system/config/file/add?type=1" multiple>
						 </span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label" >横幅图</label>
					<div class="col-sm-7">
						<input type="text" class="form-control" name="banner" id="blogBanner" placeholder="输入横幅图...">
					</div>
					<div class="col-sm-3">
						<span class="btn btn-success fileinput-button">
							<i class="glyphicon glyphicon-plus"></i>
							<span>选择文件</span>
							<input id="blogBannerFileupload"  class="fileinput-button"  type="file" name="file"  width="60" data-url="/system/config/file/add?type=1" multiple>
						 </span>
					</div>
				</div>
				<div class="form-group">
					<label for="blogAuthor" class="col-sm-2 control-label">作者</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="author" id="blogAuthor" placeholder="输入作者...">
					</div>
					<label class="col-sm-2 control-label" >来源</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="source" id="blogSource" placeholder="输入来源...">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label" >来源链接</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="sourceLink" id="blogSourceLink" placeholder="输入来源链接...">
					</div>
				</div>
				<div class="form-group">
					<label for="blogShareCount" class="col-sm-2 control-label">分享次数</label>
					<div class="col-sm-2">
						<input class="form-control" name="shareCount" id="blogShareCount"  type="number" placeholder="分享次数...">
					</div>
					<label for="blogViewCount" class="col-sm-2 control-label">浏览量</label>
					<div class="col-sm-2">
						<input class="form-control" name="viewCount" id="blogViewCount" type="number" placeholder="浏览量...">
					</div>
					<label for="blogClickCount" class="col-sm-2 control-label">点击量</label>
					<div class="col-sm-2">
						<input class="form-control" name="clickCount" id="blogClickCount"  type="number" placeholder="点击量...">
					</div>
				</div>
				<div class="form-group">
					<label for="blogWeight" class="col-sm-2  control-label">权重</label>
					<div class="col-sm-2">
						<input  class="form-control" name="weight" id="blogWeight" type="number" placeholder="权重...">
					</div>
					<label for="blogPriority" class="col-sm-2  control-label">优先级</label>
					<div class="col-sm-2">
						<input  class="form-control" name="priority" id="blogPriority" type="number" placeholder="优先级...">
					</div>
					<label for="blogStatus" class="col-sm-2  control-label">状态</label>
					<div class="col-sm-2">
						<select class="form-control" id="blogStatus"  name="status" style="width: 100%;" placeholder="选择状态...">
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label" >内容</label>
					<div class="col-sm-10">
						<textarea  name="content" id="blogContent" data-toggle="jeditor" data-upload="/system/config/file/add?type=1" placeholder="输入内容...">
						</textarea>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">备注</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="remark" id="blogRemark" placeholder="输入备注...">
					</div>
				</div>
				<div class="error-message text-center" id="addFormErrorMsgContainer">
					<span class="error-icon"></span>
					<span id="addFormErrorMsg" class="error-msg" ></span>
				</div>
			</div>
			<div class="box-body">
				<div class="text-center">
					<button type="submit" class="btn btn-primary btn-sm" ><i class="fa fa-save"></i> 保存</button>
					<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><i class="fa fa-close"></i> 取消</button>
				</div>
			</div>
		</form>
	</div>
</div>

<!-- 配置文件 -->
<script type="text/javascript" src="${request.contextPath}/static/oms/iframe/plugins/jeditor/js/jeditor.js"></script>
<script src="${request.contextPath}/static/oms/iframe/plugins/fileupload/js/vendor/jquery.ui.widget.js"></script>
<script src="${request.contextPath}/static/oms/iframe/plugins/fileupload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/oms/iframe/plugins/bootstrap-image-picker/js/imagePicker.js"></script>

<script type="text/javascript">

function ajaxSubmit(form) {
	
	var $form = $(form);
	
	if ($form.length === 1 && $form.validate()) {
		$.post(form.action, $form.serialize(),
			function(result) {
				if (result.success) {
					$("#lgModal").modal('hide');
		        	alertMsg(result.message,"success");
                    dataGridReload();
				} else {
					$form.find(".error-msg").show();
					$form.find(".error-msg").html(result.message);
				}
			}, 'json');
	}
}

$(function() {
    var $addForm = $("#addForm");

    $ajaxCategoryList.done(function(result){
        var o = [];
        var a = result;
        $.each(a, function() {
            if(this.id !== undefined && this.id !==''){
                o.push({'id':this.id,'text':this.name});
            }
        });
        var select2 = $addForm.find('[name="blogCategoryId"]').select2({
            data:o,
            placeholder: "博客分类...",
            allowClear: true,
            language: "zh-CN",
            theme: "bootstrap"
        });
        select2.val('').trigger("change");
    });

    $("#blogThumbnail").imageDynamicPicker();
    $("#blogBanner").imageDynamicPicker();

    $("#blogThumbnailFileupload").fileupload({
        url: "/system/config/file/add",
        autoUpload: true,
        dataType: 'json',
        acceptFileTypes: /\.(jpg|png|gif)$/i, //浏览器支持File API才有效
        maxFileSize: 2097152, //2M，浏览器支持File API才有效
        send: function(e, data){
            alertMsg('上传中...',"success");
        },
        done: function (e, data) {
            alertMsg("上传成功", "success");
            $("#blogThumbnail").val(data._response.result.data.url);
        },
        fail: function(e, data) {
            alertMsg("上传失败", "success");
        }
    });
    $("#blogBannerFileupload").fileupload({
        url: "/system/config/file/add",
        autoUpload: true,
        dataType: 'json',
        acceptFileTypes: /\.(jpg|png|gif)$/i, //浏览器支持File API才有效
        maxFileSize: 2097152, //2M，浏览器支持File API才有效
        send: function(e, data){
            alertMsg('上传中...',"success");
        },
        done: function (e, data) {
            alertMsg("上传成功", "success");
            $("#blogBanner").val(data._response.result.data.url);
        },
        fail: function(e, data) {
            alertMsg("上传失败", "success");
        }
    });

    $("#blogStatus").select2({
        data: StatusStore,
        theme: "bootstrap"
    });

    $('[data-toggle="jeditor"]').each(function() {

        var $this = $(this)
        var editor = new jeditor($this);
        var uploadUrl = $this.data('upload');
        editor.config.uploadImgUrl= uploadUrl;
        editor.config.hideLinkImg = true;
        editor.config.uploadImgFileName='file';
        editor.config.containerHeight=400;
        editor.config.uploadImgFns = {
            onload:function (resultText, xhr) {
                var resultObj = eval('(' + resultText + ')');
                console.info('上传结束，返回结果为 ' + resultText);
                var editor = this;
                var originalName = editor.uploadImgOriginalName || '';  // 上传图片时，已经将图片的名字存在 editor.uploadImgOriginalName
                var img;
                if (!resultObj.success) {
                    // 提示错误
                    console.warn('上传失败：' + resultObj.message);
                    alert(resultObj.message);
                } else {
                    console.log('上传成功，即将插入编辑区域，结果为：' + resultText);

                    // 将结果插入编辑器
                    img = document.createElement('img');
                    img.onload = function () {
                        var html = '<img src="' + resultObj.data.urlFull + '" alt="' + originalName + '" style="max-width:100%;"/>';
                        editor.command(null, 'insertHtml', html);

                        console.log('已插入图片，地址 ' + resultObj.data.urlFull);
                        img = null;
                    };
                    img.onerror = function () {
                        console.error('使用返回的结果获取图片，发生错误。请确认以下结果是否正确：' + resultObj.data.urlFull);
                        img = null;
                    };
                    img.src = resultObj.data.urlFull;
                }

            }
        };
        editor.create();
    });

	$addForm.validate({
		rules: {
            title: {
				required: true
			},
            shortTitle: {
				required: true
			},
            domain: {
                required: true
            },
			copyright:{
			    required: true
            },
			description: {
				required: true
			},
			seq: {
				required: true
			}
		},
		messages: {
            title:{
				required:"标题不能为空！"
			},
            shortTitle:{
				required:"短标题不能为空！"
			},
            domain:{
                required:"域名不能为空！"
            },
            copyright:{
                required:"版权信息不能为空！"
            },
			description: {
				required: "描述不能为空！"
			},
			seq: {
				required: "排序号不能为空！"
			}
		},
		submitHandler:ajaxSubmit,
		errorLabelContainer:"#addFormErrorMsgContainer",
		wrapper:"li",
		showErrors:function(errorMap,errorList) {
			if(errorList.length>0){
				$addForm.find(".error-msg").html(errorList[0].message);
			}else{
				$addForm.find(".error-msg").html("");
			}
		},
		onkeyup: false
	});
});
</script>